<template>
  <div class="container clearfix">
    <div class="search-box">
      <div class="search-bar">
        <input type="search"
               confirm-type="search"
               :adjust-position="false"
               class="inp"
               placeholder="请输入搜索内容"
               :focus="auto_focus"
               v-model="search_key"
               @confirm="search"
               maxlength="30">
        <img :src="base_url+'/mp_2.0/shouye/chaxun@2x.png'"
             v-if="base_url"
             alt=""
             class="icon">
      </div>
      <div class="search-btn"
           @tap="search">
        搜索
      </div>
    </div>
    <div class="content">
      <result :key_word="key_word"
              :result_status="result_status"
              v-if="show_result"></result>
      <history v-if="!show_result"
               @select_key="selected_key"></history>
      <discovery v-if="!show_result&&result_status!=2"
                 @select_key="selected_key"></discovery>
    </div>
  </div>
</template>
<script>
import common from '@/assets/js/mmk_common.js'
import empty from "@/components/search/empty";
import history from "@/components/search/history";
import discovery from "@/components/search/discovery";
import result from "@/components/search/result";
export default {
  data () {
    return {
      isempty: false, // true 代表没有搜索到
      base_url: common.image_resource,
      search_key: "",
      key_word: "",
      select_key: "",
      show_result: false,
      auto_focus: true,
      result_status: 1
    };
  },
  methods: {
    search () {
      let that = this;
      if (this.search_key.trim() == "") {
        wx.showToast({
          title: "请输入搜索内容", //提示的内容,
          icon: "none", //图标,
          duration: 1500, //延迟时间,
          mask: false, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
      } else {
        this.key_word = this.search_key;
        this.show_result = true;
      /*   wx.getStorage({
          key: "search_history",
          success: res => {
            let arr = res.data, new_arr = []
            if (arr.length >= 10) {
              arr.pop()
              arr.unshift(that.search_key);
              arr.forEach(item => {
                if (!new_arr.includes(item)) {
                  new_arr.push(item)
                }
              });
              wx.setStorageSync("search_history", new_arr);
            } else {
              arr.unshift(that.search_key);
              arr.forEach(item => {
                if (!new_arr.includes(item)) {
                  new_arr.push(item)
                }
              });
              wx.setStorageSync("search_history", new_arr);
            }
          },
          fail: () => {
            wx.setStorageSync("search_history", [that.search_key]);
          },
          complete: () => { }
        }); */
      }
    },
    selected_key (data) {
      this.key_word = data;
      this.search_key = data;
      this.show_result = true;
    },

  },
  watch: {},
  computed: {
    result_status (val) {

    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "搜索"
    });
    Object.assign(this.$data, this.$options.data());
    if (options.status) {
      // 判断来源字段  1表示首页搜索  2表示品质医美搜索
      console.log(options);

      this.result_status = options.status
    }
    if (options.keyword) {
      this.search_key = options.keyword
      this.auto_focus = false
      this.search()
    } else {
      this.auto_focus = true
    }

  },
  components: {
    empty,
    history,
    result,
    discovery
  }
};
</script>

<style lang="less" scoped>
.container {
  background: rgba(243, 244, 246, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-box {
    height: 44px;
    display: flex;
    background-color: #fff;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
    .search-bar {
      flex: 1;
      margin-left: 15px;
      position: relative;
      .inp {
        height: 32px;
        line-height: 32px;
        background: rgba(244, 244, 244, 1);
        border-radius: 32px;
        margin-top: 6px;
        padding-left: 40px;
      }
      .icon {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .search-btn {
      padding: 0 15px;
      line-height: 44px;
      font-size: 14px;
      font-family: "Medium";
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
  .content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
}
</style>



